<template>
  <div>
    <div class="info_description">
      <my-descriptions
        :list="list"
        title="个人信息"
        :border="true"
        :size="medium"
        style="margin-top: 5%"
      >
        <template #userStudy="{ data }">
          {{ fc_arr_profeInfos(data.value) }}
        </template>
        <template #userSciunit="{ data }">
          {{ fc_arr_sciUtils(data.value) }}
        </template>
        <template #userCatego="{ data }">
          {{ (data.value) }}
        </template>
        <template #userEndstudy="{ data }">
          {{ (data.value) }}
        </template>
        <template #userPersunit="{ data }">
          {{ fc_arr_sciUtils(data.value) }}
        </template>
        <template #userFircate="{ data }">
          {{ fc_arr_sciDiscipline(data.value) }}
        </template>
        <template #userSeccate="{ data }">
          {{ fc_arr_sciDiscipline(data.value) }}
        </template>
        <template #userAge="{ data }">
          {{ (data.value + "").slice(0, 10) }}
        </template>
      </my-descriptions>







      <el-button type="primary" @click="update" class="edit_button"
        >编辑</el-button
      >
    </div>

    <my-dialog :title="infoTitle" :dialogVisible.sync="infoDialog">
      <template #content>
        <my-form
          :formOptions="formOptions"
          :form="copyForm"
          :rules="infoRules"
          @sureSubmit="sureInfoSubmit"
        >
        </my-form>
      </template>
    </my-dialog>
  </div>
</template>

<script>
import myDescriptions from "@/components/myDescription.vue";
import myForm from "@/components/myForm.vue";
import myDialog from "@/components/myDialog.vue";
import { mapActions, mapState } from "vuex";
import { getSlide } from "@/api/user/myInfo";
import cloneDeep from "lodash/cloneDeep";
import request from "@/utils/request"
import {projectCate,getModelByLabel,getLabelByModel} from "@/utils/metaInfo"
export default {
  name: "myInfo",
  inject: ["reload"],
  data() {
    return {
      title: "个人信息",
      infoDialog: false,
      infoTitle: "编辑信息",
      infoRules: {
        userName: [{ required: true, message: "请输入姓名" }],
        userId: [{ required: true, message: "请输入职工号" }],
        userAge: [{ required: false, message: "请选择出生日期" }],
        userPersunit: [{ required: false, message: "请选择人事单位" }],
        userStudy: [{ required: false, message: "请选择当前专业" }],
        userEndstudy: [{ required: false, message: "请选择毕业专业" }],
        userSciunit: [{ required: false, message: "请选择科研单位" }],
        userDept: [{ required: false, message: "请输入教研室" }],
        userDegree: [{ required: false, message: "请选择学历" }],
        userAcadegree: [{ required: false, message: "请输入学位" }],
        userProtitle: [{ required: false, message: "请输入职称" }],
        userCatego: [{ required: false, message: "请选择学科门类" }],
        userFircate: [{ required: true, message: "请选择所在学科" }],
        userSeccate: [{ required: true, message: "请先选择所在学科,再选择学科方向" }],
        userResdire: [{ required: false, message: "请输入研究方向" }],
        userPhone: [{ required: false, message: "请输入电话" }],
        userEmail: [{ required: false, message: "请输入邮箱" }],
      },
      formOptions: [
        {
          type: "input",
          label: "姓名",
          model: "userName",
          disabled: true,
        },
        {
          type: "date",
          label: "出生日期",
          model: "userAge",
        },
        {
          type: "input",
          label: "工号",
          model: "userId",
          disabled: true,
        },
        {
          type: "select",
          label: "当前专业",
          model: "userStudy",
          options_type: "profeInfos",
          options: [],
          // disabled: true,
        },
        {
          type: "radio",
          label: "性别",
          model: "userSex",
          width:218,
          options: [
            {
              label: "男",
              model: "男",
              // disabled: true,
            },
            {
              label: "女",
              model: "女",
              // disabled: true,
            },
          ],
        },
        {
          type: "select",
          label: "毕业专业",
          model: "userEndstudy",
          options_type: "profeInfos",
          options: [],
          // disabled: true,
        },
        {
          type: "radio",
          label: "学历",
          model: "userDegree",
          options: [
            { label: "专科", model: "专科",disabled: false },
            { label: "本科", model: "本科",disabled: false },
            { label: "研究生", model: "研究生",disabled: false },
            { label: "其他", model: "其他",disabled: false },
          ],
        },
       
        {
          type: "radio",
          label: "学位",
          model: "userAcadegree",
          width:500,
          options: [
            { label: "学士", model: "学士",disabled: false },
            { label: "研究生", model: "研究生",disabled: false },
            { label: "博士", model: "博士",disabled: false },
            { label: "其他", model: "其他",disabled: false },
          ],
        },
         {
          type: "select",
          label: "人事单位",
          model: "userPersunit",
          width:178,
          options_type: "sciUtils",
          options: [],
          // disabled: true,
        },
        {
          type: "select",
          label: "科研单位",
          width:220,
          model: "userSciunit",
          options_type: "sciUtils",
          options: [],
          // disabled: true,
        },
        {
          type: "input",
          label: "职称",
          model: "userProtitle",
          // disabled: true,
        },
        {
          type: "select",
          label: "学科门类",
          model: "userCatego",
          // options_type: "sciDiscipline",
          options: projectCate,
          // disabled: true,
        },
        {
          type: "input",
          label: "电话",
          model: "userPhone",
        },
        {
          type: "select",
          label: "所在学科",
          model: "userFircate",
          options_type: "sciDiscipline",
          options: [],
          // disabled: true,
        },
        {
          type: "input",
          label: "邮箱",
          model: "userEmail",
        },
        {
          type: "select",
          label: "学科方向",
          model: "userSeccate",
          // options_type: "sciDiscipline",
          options: [],
          // disabled: true,
        },
        {
          type: "textarea",
          label: "研究方向",
          model: "userResdire",
          width:500
        },
      ],
      passwordRules: {
        userPassword: [{ required: true, message: "请输入密码" }],
        rePassword: [{ required: true, message: "请确认密码" }],
      },
      sildeArr: {},
      copyForm: {},
      list:[],
      arr_sciUtils: [],
      arr_sciDiscipline: [],
      arr_profeInfos: [],
    };
  },
  components: {
    myDescriptions,
    myForm,
    myDialog,
  },
  computed: {
    userInfo() {
      return JSON.parse(sessionStorage.getItem("userInfo"));
    },
  },
  async created() {
    this.setUserInfo();
    await this.getSlides();
    this.formOptions.map((item) => {
      if (item.options_type) {
        if (item.options_type === "sciUtils") {
          item.options = this.sciUtils();
        } else if (item.options_type === "sciDiscipline") {
          item.options = this.sciDiscipline();
        } else if (item.options_type === "profeInfos") {
          item.options = this.profeInfos();
        }
      }
      return item;
    });

    console.log(sciDirectionOptions)
  },
  methods: {
    ...mapActions("myInfo", ["updateInfo_"]),
    userinfoItem(label){
      return this.userInfo[label]
    },
    async getSlides() {
      let res = await getSlide();
      this.sildeArr = res.data;
    },
    update() {
      this.copyForm = cloneDeep(this.userInfo);
      console.log(this.copyForm)
      this.infoDialog = true;
    },
    sciUtils() {
      let arr = [];
      this.sildeArr.sciUtils.forEach((item) => {
        let { utilsName, utilsKey } = item;
        arr.push({ label: utilsName, model: utilsKey });
      });
      this.arr_sciUtils = arr;
      return arr;
    },
    sciDiscipline() {
      let arr = [];
      this.sildeArr.sciDiscipline.forEach((item) => {
        let { subName, subKey } = item;
        arr.push({ label: subName, model: subKey });
      });
      this.arr_sciDiscipline = arr;
      return arr;
    },
    profeInfos() {
      let arr = [];
      this.sildeArr.profeInfos.forEach((item) => {
        let { proName, proKey } = item;
        arr.push({ label: proName, model: proKey });
      });
      this.arr_profeInfos = arr;
      return arr;
    },
    async sureInfoSubmit(data) {
      data.userCatego = getModelByLabel(data.userCatego,projectCate)
      data.userFircate = getModelByLabel(data.userFircate,this.arr_sciDiscipline)
      data.userSeccate = getModelByLabel(data.userSeccate,this.formOptions[15].options)

      let result = await this.updateInfo_(data);
      if (result.code === 1) {
        sessionStorage.setItem("userInfo", JSON.stringify(cloneDeep(data)));
        this.$message({ type: "success", message: result.data });
        this.reload();
      } else {
        this.$message({ type: "error", message: result.msg });
      }
    },
    setUserInfo() {
      let {
        userName,
        userAge,
        userId,
        userStudy,
        userSex,
        userEndstudy,
        userDegree,
        userPersunit,
        userAcadegree,
        userSciunit,
        userProtitle,
        userCatego,
        userPhone,
        userFircate,
        userEmail,
        userSeccate,
        userResdire,
      } = this.userInfo;
      this.list = [
        {
          label: "姓名",
          value: userName,
          icon: "",
        },
        {
          slot: true,
          label: "出生日期",
          value: userAge,
          slotName: "userAge",
          icon: "",
        },
        {
          label: "工号",
          value: userId,
          icon: "",
        },
        {
          slot: true,
          slotName: "userStudy",
          label: "当前专业",
          value: userStudy,
          icon: "",
        },
        {
          label: "性别",
          value: userSex,
          icon: "", 
        },
        {
          slot: true,
          slotName: "userEndstudy",
          label: "毕业专业",
          value: userEndstudy,
          icon: "",
        },
        {
          label: "学历",
          value: userDegree,
          icon: "",
        },
        {
          slot: true,
          slotName: "userPersunit",
          label: "人事单位",
          value: userPersunit,
          icon: "",
        },
        {
          label: "学位",
          value: userAcadegree,
          icon: "",
        },
        {
          slot: true,
          slotName: "userSciunit",
          label: "科研单位",
          value: userSciunit,
          icon: "",
        },
        {
          label: "职称",
          value: userProtitle,
          icon: "",
        },
        {
          slot: true,
          slotName: "userCatego",
          label: "学科门类",
          value: userCatego,
          icon: "",
        },
        {
          label: "电话",
          value: userPhone,
          icon: "",
        },
        {
          slot: true,
          slotName: "userFircate",
          label: "所在学科",
          value: userFircate,
          icon: "",
        },
        {
          label: "邮箱",
          value: userEmail,
          icon: "",
        },
        {
       
          slotName: "userSeccate",
          label: "学科方向",
          value: userSeccate,
          icon: "",
        },
        {
          label: "研究方向",
          value: userResdire,
          icon: "",
        },
      ];
    },
    fc_arr_profeInfos(value) {
      for (var item of this.arr_profeInfos) {
        console.log(value,item.label)
        if (item.label == value) return item.label;
      } 
    },
    fc_arr_sciUtils(value) {
      for (var item of this.arr_sciUtils) {
        console.log(value,item.label)
        if (item.label == value) return item.label;
      }
    },
    fc_arr_sciDiscipline(value) {
      for (var item of this.arr_sciDiscipline) {
        console.log(value,item.label)
        if (item.label == value) return item.label;
      }
    },
  },
  watch:{
    "copyForm.userFircate":{
      async handler(newval,old) {
        console.log(newval,old);
        let sciDirectionOptions = await request({
          url:"SciDirection/getDirection/select",
          method:"post",
          data:{dirDis:newval}
        })
        console.log(sciDirectionOptions);
        const options = [];

        sciDirectionOptions.data.forEach(item => {
          const { dirkey, dirName } = item;
          options.push({
            label: dirName,
            model: dirkey
          });
        });
        this.formOptions[15].options = options
      },
       deep: true,
      immediate: true

    }
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dotted #409eff;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.info_description {
  width: 45%;
}

.edit_button {
  margin-top: 20px;
  margin-left: 50%;
  transform: translate(-50%);
}
</style>